<template>
	<view class="main">
		<view class="title">输入验证码</view>
		<view class="tips">验证码已发送至 {{ tel }}</view>
		<u-message-input :focus="true" :value="value" @finish="finish" mode="bottomLine" :maxlength="4"></u-message-input>
		<view class="btn">
			<text v-if="second > 0" class="grey">{{ second }}秒后重新获取验证码</text>
			<text v-else @tap="getSMS">重新获取验证码</text>
		</view>
	</view>
</template>

<script>
import { http } from '@/lib/js/request';
import { goPage, delay } from '@/lib/js/utils';
import { toast } from '@/lib/js/dailog';
const initSecond = 60;
export default {
	data() {
		return {
			tel: this.$route.query.tel,
			value: '',
			second: initSecond
		};
	},
	computed: {},
	onLoad() {
		setInterval(() => this.second--, 1000);
	},
	methods: {
		// 输入完验证码最后一位执行
		async finish(value) {
			await http('/user/checksms', { tel: this.tel, sms: value, parent_uid: uni.getStorageSync('parent_uid') });
			toast('登录成功');
			await delay(1000);
			goPage('/pages/index/index');
		},
		// 重新获取短信验证码
		async getSMS() {
			await http('/user/sendsms', { tel: this.tel });
			this.second = initSecond;
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	font-size: 28rpx;
	margin: 100rpx;

	.title {
		text-align: left;
		font-size: 54rpx;
		font-weight: 500;
		margin-bottom: 120rpx;
	}

	.tips {
		margin-bottom: 20rpx;
	}

	.btn {
		margin-top: 40rpx;
		color: $color-1;

		.grey {
			color: #999;
		}
	}
}
</style>
